<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>仿QQ好友分组</title>
<style type="text/css">
	table{border:#09f 1px solid;width:100px;border-collapse:collapse;margin:15px 10px;margin:20px 20px;}
	table td{border:#06f 1px solid;background-color:#6f5f3e;text-align:center;padding:5px 0;}
	table td div{background-color:#ff9;text-align:left;line-height:28px;padding-left:14px;text-indent:padding-left:20px;}
	table td span{color:#fff;font-size:19px;width:100%;border:none;display:block;cursor:pointer;}
	table td a:hover{color:#0c0}
</style>

<!--引入jquery的js库-->
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
	/** 通过jQuery实现仿QQ列表好友列表 */
	function openDiv(thisobj){
		//在展开当前分组之前, 先关闭其他三个分组
		//>>选中其他三个分组并关闭.
		$(thisobj).parents("tr").siblings().find("div").hide();
		//$("span").not(thisobj).next("div").hide(100);//不为当前对象的所有span对象的下一个div
		//点击当前分组, 切换分组的状态(如果展开则关闭, 如果关闭则展开)
		$(thisobj).next().toggle();
	}
	
	/** 通过javascipt实现仿QQ列表好友列表 
	function openDiv(thisobj){
		//1.获取当前分组内好友列表div
		var oDiv = thisobj.parentNode.getElementsByTagName("div")[0];
		//2.判断当前分组div是展开还是关闭
		if(oDiv.style.display == "block"){
			//3.如果当前div是打开的, 只需关闭该div即可
			oDiv.style.display = "none";
		}else{
			//4.如果当前div是关闭的, 先关闭其他分组的div, 再打开当前的  
			//获取所有分组内的div,遍历依次关闭所有分组
			var aDiv = document.getElementsByTagName("div");
			for(var i=0;i<aDiv.length; i++){
				aDiv[i].style.display = "none";
			}
			//再打开当前分组
			oDiv.style.display = "block";
		}
	} */
</script>
</head>
<body>
<table>
	<tr>
		<td>
			<span onclick="openDiv(this)">君王好友</span>
			<div style="display:none">
				秦始皇<br />
				刘邦<br />
				李世民<br />
				康熙<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">三国好友</span>
			<div style="display:none">
				刘备<br />
				关羽<br />
				张飞<br />
				赵云<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">美女好友</span>
			<div style="display:none">
				西施<br />
				貂蝉<br />
				杨贵妃<br />
				王昭君<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<span onclick="openDiv(this)">IT好友</span>
			<div style="display:none">
				王海涛<br />
				马云<br />
				李开复<br />
				俞敏洪<br />
			</div>
		</td>
	</tr>
</table>
</body>
</html>
